<template>
  <div v-if="_config.show" class="wrapper">
    <el-pagination
      v-if="_config.type===1"
      v-bind="_config"
      :total="total"
      :current-page.sync="currentPage"
      v-on="$listeners"
    />
    <!-- 自定义分页 -->
    <el-button-group v-if="_config.type===2" class="page-box">
      <el-button
        v-if="currentPage!=1"
        type="primary"
        size="small"
        icon="el-icon-arrow-left"
        @click="paginationBtn('prev')"
      >上一页</el-button>
      <el-button
        v-if="showNext"
        type="primary"
        size="small"
        @click="paginationBtn('next')"
      >下一页<i
        class="el-icon-arrow-right el-icon--right"
      /></el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    },
    pageIndex: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    // 是否展示下一页按钮
    showNext: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentPage: this.pageIndex
    }
  },
  computed: {
    _config() {
      const defConfig = {
        show: true,
        type: 1,
        background: true,
        layout: 'total,sizes,prev, pager,next',
        pageSizes: [10, 20, 30],
        pageSize: 10
      }
      return { ...defConfig, ...this.config }
    }
  },
  watch: {
    pageIndex(newVal) {
      this.currentPage = newVal
    }
  },
  methods: {
    paginationBtn(type) {
      if (type === 'prev') {
        this.showNext = true
        this.currentPage--
      } else if (type === 'next') {
        this.currentPage++
      }
      this.$emit('custom-current-change', this.currentPage)
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  margin: 50px 0;
  @include flex(flex-end, center);
}
</style>

